<template>
  <div class="listPage">
    <!-- 商品详情窗口-->
      <div class="detail" v-if="itemBox">
        <el-descriptions title="商品详情">
          <el-descriptions-item label="商品名"
            >{{this.itemMsg.title}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="价格">
          <el-descriptions-item label="售价"
            >{{this.itemMsg.current}} </el-descriptions-item>
            <el-descriptions-item label="原价">
            {{this.itemMsg.price}} </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="销量/库存">
          <el-descriptions-item label="是否热卖"
            >{{this.itemMsg.isHot}} </el-descriptions-item>
            <el-descriptions-item label="库存">
            {{this.itemMsg.number}} </el-descriptions-item>
        </el-descriptions>
        <el-button type="danger" plain @click="itemBox = !itemBox" class="closeBtn">关闭窗口</el-button>
       </div>
       <!-- 商品页页头 -->
       <div class="searchHeader">
            <input type="text" v-model="searchtext" class="searchBox" placeholder="请输入搜索内容" @keydown.enter="keydownSearch">
            <el-button type="primary" class="searchBtn" @click="searchClick" >搜索商品</el-button>
          <!-- 按要求筛选 -->
            <div class="typeList">
              <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                ellipsis="false"
              >
                <el-menu-item index="1" @click="hotClick">热销商品</el-menu-item>
                <el-menu-item index="2" @click="saleClick">打折商品</el-menu-item>
                <el-menu-item index="3" @click="upClick">价格升序</el-menu-item>
                <el-menu-item index="4" @click="downClick">价格降序</el-menu-item>
                <el-menu-item index="0" @click="mainClick">默认</el-menu-item>
              </el-menu>
            </div>
    <!-- 分类筛选 -->
            <el-space class="space">
              <el-select v-model="selectValue">
                <el-option label="全部" value="" @click="getList(1)" ></el-option>
                <el-option v-for="item in kindData" :key="item" :label="item" :value="item" @click="kindClick"></el-option>
              </el-select>
            </el-space>
       </div>
       <!-- 商品信息列表 -->
       <div class="ListBox">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="title" label="商品名称" width="160" />
            <el-table-column prop="img" label="图片" >
              <template #default="{row}">
                <el-image preview-teleported :preview-src-list="[row.img_big_logo]" :src="row.img_big_logo"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="单价" width="160" />
            <el-table-column prop="goods_number" label="库存" width="160" />
            <el-table-column prop="sale_type" label="比率" width="160" />
            <el-table-column prop="goods_id" width="160">
              <template #default="{row}">
                <el-button plain @click="item(row.goods_id)">查看详情</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="" width="160">
              <template #default="{row}">
                <el-button plain @click="addItems(row.goods_id)">加入推荐</el-button>
              </template>
            </el-table-column>
          </el-table>
       </div>
       <!-- 分页 -->
       <div class="pageBox">
        <div class="example-pagination-block">
          <div class="example-demonstration"></div>
          <el-pagination 
          background
          layout="prev,next" :total="50"
          v-model:current-page="currentPage"
          :page-size="pageSize"
          @current-change="change"
          @next-click = "nextPage"
          :page-count = 92
          />
        </div>
       </div>
       
  </div>
</template>
<script>
import { goodList } from '../../api/Shop';
import {kindList} from '../../api/Shop';
import {goodItem} from '../../api/Shop';
import {searchItem} from '../../api/Shop';
import {categoryItem} from '../../api/Shop';
import {getHot} from '../../api/Shop';
import {getSale} from '../../api/Shop';
import {priceUp} from '../../api/Shop';
import {priceDown} from '../../api/Shop';
import {addItem} from '../../api/Shop';
import store from '../../store';
import { ElMessage } from 'element-plus';

export default {
  data () {
    return {
      tableData: [],
      searchtext: '',
      currentPage: 1,
      pageSize: 10,
      tatal: 0,
      itemBox: false,
      itemMsg: {
        category: '',
        price: '',
        current: '',
        number: '',
        imgSrc: '',
        isHot: '',
        isSale: '',
        saleType: '',
        title: ''
      },
      kindData: [],
      selectValue: '',

      activeIndex: '0',

      // 用来存放 请求的条件
      whatType: '',

    }
  },
  created(){
        goodList(1)
        .then((res) =>{
            this.tableData = res.list || []
            }),
        kindList()
        .then((res) =>{
              this.kindData = res.list || []
            })
       
  },
  methods: {
      //  获取商品总列表
       getList(page){
        goodList(page)
        .then((res) =>{
            this.tableData = res.list || []
        })
       },
      //  获取分类列表
       getgoodItem(){
        goodItem()
       },
      //  分类显示
       getKind(){
        kindList()
       },
      //  点击页码的时候
      change(){
        this.judgment(this.whatType)
      },
      // 搜索商品
      search(current){
        this.whatType = this.searchtext;
        searchItem(this.searchtext,current)
        .then((res) =>{
          this.tableData = res.list || []
        })
      },
      // 查看商品详情
      item(e){
        goodItem(e)
        .then((res) =>{
          this.itemMsg.category = res.info.category;
          this.itemMsg.imgSrc = res.info.img_big_logo;
          this.itemMsg.title = res.info.title;
          this.itemMsg.current = res.info.current_price;
          this.itemMsg.price = res.info.price;
          this.itemMsg.isHot = res.info.is_hot ? '是' : '否';
          this.itemMsg.number = res.info.goods_number;
          this.itemBox = !this.itemBox;
        })
      },
      // 添加商品
      addItems(id){
        addItem(store.state.userInfo.id,id)
        .then(() =>{
          ElMessage({
            message: '加入成功',
            type: 'success',
          });
        })
      },
      // 分类搜索
      kindSearch(current){
        this.whatType = this.selectValue
        categoryItem(this.selectValue,current).then((res) =>{
          this.tableData = res.list || []
        })
      },
      // 回车搜素
      keydownSearch(){
        if(this.searchtext === ''){
          return
        }else{
          this.search(1)
        }
      },
      // 按要求筛选
      // 热销
      getHotitem(current){
        this.whatType = 'hot'
        getHot(current)
        .then((res) =>{
          this.tableData = res.list || []
        })
      },
      // 打折
      getSaleitem(current){
        this.whatType = 'sale'
        getSale(current)
        .then((res) =>{
          this.tableData = res.list || []
        })
      },
      // 价格升序
      getPup(current){
        this.whatType = 'Pup'
        priceUp(current)
        .then((res) =>{
          this.tableData = res.list || []
        })
      },
      // 价格降序
      getPDown(current){
        this.whatType = 'Pdown'
        priceDown(current)
        .then((res) =>{
          this.tableData = res.list || []
        })
      },
      // 解决分页问题
      hotClick(){
        this.searchtext = ''
        this.currentPage = 1
        this.getHotitem(1)
      },
      saleClick(){
        this.searchtext = ''
        this.currentPage = 1
        this.getSaleitem(1)
      },
      upClick(){
        this.searchtext = ''
        this.currentPage = 1
        this.getPup(1)
      },
      downClick(){
        this.searchtext = ''
        this.currentPage = 1
        this.getPDown(1)
      },
      mainClick(){
        this.searchtext = ''
        this.currentPage = 1
        this.getList(1)
      },
      searchClick(){
        this.activeIndex = '0'
        this.selectValue = '全部'
        this.currentPage = 1
        this.search(1)
      },
      kindClick(){
        this.activeIndex = '0'
        this.searchtext = ''
        this.currentPage = 1
        this.kindSearch(1)
      },
      // 解决分页不匹配问题
      nextPage(){
        this.judgment(this.whatType)
        if(this.whatType === this.selectValue){
          if(this.tableData.length < 10){
            alert('无更多数据')
            this.currentPage = 1
            this.kindSearch(1)
          }
        }else if(this.whatType === this.searchtext){
          if(this.tableData.length < 10){
            alert('无更多数据')
            this.currentPage = 1
            this.search(1)
        }
        }
        
      },
      // 封装判断
      judgment(value){
        if(value === 'hot'){
          this.getHotitem(this.currentPage)
        }else if(value === 'sale'){
          this.getSaleitem(this.currentPage)
        }else if(value === 'Pup'){
          this.getPup(this.currentPage)
        }else if(value === 'Pdown'){
          this.getPDown(this.currentPage)
        }else if(value === this.searchtext){
          this.search(this.currentPage)
        }else if(value === this.selectValue){
          this.kindSearch(this.currentPage)
        }
      }
      
  },
}
</script>
<style lang="scss" scoped>
.listPage{
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
}
.pageBox{
  //width: 100%;
  margin-left: 37%;
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 10px;
  z-index:999
}
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}
//按要求筛选
.searchHeader{
  display: flex;
  height: 53px;
  width: 100%;
  background-color: rgb(255, 255, 255);
}
.searchHeader .searchBox{
  border: 1px solid rgb(193, 193, 193);
  border-radius: 5px;
  width: 250px;
  margin: 10px;
  margin-right: 3px;
}
.searchHeader .space{
  width: 250px;
}
.searchHeader .typeList{
  width: 50%;
  margin-left: 20px;
  overflow: hidden;
}
.searchHeader .searchBtn{
  margin-top:10px;
}
.detail{
  width: 500px;
  height: 500px;
  background-color: rgb(254, 254, 254);
  border-radius: 20px;
  position: fixed;
  left: 40%;
  z-index: 9999;
  box-shadow: 1px 1px 20px 1px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding: 15px;
  transition:1s all;
  animation: ant1 0.35s 1; 
  overflow: hidden;
}
@keyframes ant1{
  0%{
    width: 0px;
    height: 0px;
  }
  100%{
    width: 500px;
    height: 500px;
  }
}
.detail .closeBtn{
  margin-top: 40%;
  margin-left: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
